<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠券</title>
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/youhuiquan.css">
</head>

<body>
    <div class="container">
        <header class="top">
            <div class="title">
                <p>优惠券</p>
            </div>
        </header>
        <section class="content">
            <div class="nav">
                <p class="p1">全部</p>
                <p>未使用</p>
                <p>已使用</p>
            </div>
            <div class="yhq-box">
                <div class="yhq">
                    <div class="yhq-top">
                        <div class="title">
                            <p class="p1">店铺指定打折饮品券（新人...）</p>
                            <p class="p2">有效期至2020-12-17</p>
                        </div>
                        <div class="price">
                            <span class="span-1">￥</span>
                            <span class="span-2">15</span>
                        </div>
                    </div>
                    <div class="yhq-bottom">
                        <a href="./gzsm.html">
                            <p class="p-1">使用规则<i class="fa fa-question-circle-o"></i></p>
                        </a>
                        <div>
                            <p class="p-2">立即使用</p>
                            <!-- <button class="p-2">立即使用</button> -->
                        </div>
                    </div>
                </div>
                <div class="yhq">
                    <div class="yhq-top">
                        <div class="title">
                            <p class="p1 used">店铺指定打折饮品券（新人...）</p>
                            <p class="p2">有效期至2020-12-17</p>
                        </div>
                        <div class="price">
                            <span class="span-1 used">￥</span>
                            <span class="span-2 used">15</span>
                        </div>
                    </div>
                    <div class="yhq-bottom">
                        <a href="./gzsm.html">
                            <p class="p-1">使用规则<i class="fa fa-question-circle-o"></i></p>
                        </a>
                        <div>
                            <p class="p-2 used">已使用</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

</body>

</html>